<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
ul,h3,body{margin: 0;padding: 0}
li{list-style: none;}
.box{width: 680px; border: 1px solid #333;padding:10px;margin:20px auto;}
#nav{float:left;width: 100%;height: 50px;}
#nav h3{width: 160px; float: left;line-height: 50px; background-color: #abe498;text-align: center;}
img{width: 500px; height:270px;border: none; vertical-align: top;float: left;}
#pic{width: 150px; height: 270px; float: left; background-color: #eee}
#pic li{height: 90px;line-height: 90px;text-align: center;}
.clear{zoom:1;}
.clear:after{content: '';display: block;clear: both;}
</style>
<script type="text/javascript">
window.onload = function (){
	var aH3 = document.getElementsByTagName('h3');
	var oImg = document.getElementsByTagName('img')[0];
	var aLi = document.getElementsByTagName('li');
	var arrMenu = [
		{
			'url': ['1-1.jpg','1-2.jpg','1-3.jpg'],
			'text': ['图片一','图片二','图片三']
		},{
			'url': ['2-1.jpg','2-2.jpg','2-3.jpg'],
			'text': ['图片四','图片五','图片六']
		},{
			'url': ['3-1.jpg','3-2.jpg','3-3.jpg'],
			'text': ['图片七','图片八','图片九']
		}
	];
	var n = 0;
	var num = 0;
	var x= 0;

	//初始化
	aLi[num].style.backgroundColor = 'blue';
	oImg.src = arrMenu[n].url[num];
	aH3[n].style.backgroundColor = '#f45789';
		

	//菜单栏切换
	setInterval(function(){
		for (var i = 0; i < aH3.length; i++) {
			aH3[i].style.backgroundColor = '#abe498';
		};

		n ++;
		if (n == aH3.length) {
			n = 0;
		};
		aH3[n].style.backgroundColor = '#f45789';
		for (var i = 0; i < aLi.length; i++) {
			aLi[i].innerHTML = arrMenu[n].text[i];
		};
	},3000)

		//图片栏切换
//		setTimeout(function(){				//第一张图片延迟3s再切换
			setInterval(function(){
				for (var i = 0; i < aLi.length; i++) {
					aLi[i].style.backgroundColor = '#eee';
				};

				num ++;
				if (num == aLi.length) {
					num = 0;
				};
				aLi[num].style.backgroundColor = 'blue';
				aLi[num].innerHTML = arrMenu[n].text[num];
				oImg.src = arrMenu[n].url[num];
			},1000)
//		},2000)






}
</script>
<body>
	<div class="box clear">
		<div id="nav">
			<h3>菜单一</h3>
			<h3>菜单二</h3>
			<h3>菜单三</h3>
		</div>
		<img src="1-1.jpg">
		<ul id="pic">
			<li>图片一</li>
			<li>图片二</li>
			<li>图片三</li>
		</ul>
	</div>
	<p>我只不过是把时间的间隔设置得刚刚好，当菜单一切换，图片也刚好回到第一张。</p>
	<p>先在要思考一个问题，如果菜单栏下图片的个数不想等时，怎么让菜单一切换，总能回到对应的第一张呢？（在不设置多个变量为0的情况下，该如何实现？）</p>
</body>
</html>